<%@ page contentType="text/html;charset=UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page isELIgnored="false" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style type="text/css">
        .login-wrapper {
            width: 100vw;
            height: 100vh;
            color: #fff;
        }

        .login, body {
            background: rgba(0, 206, 209, 0.6);
        }

        .btn-mybg {
            color: #fff;
            background-color: #66CDAA;
            border: none;
        }

        .btn-mybg:hover {
            color: #fff;
            background-color: #218838;
            border-color: #1e7e34;
        }
    </style>
</head>
<body>
<%
    //获取session中的错误信息
    String msg = (String) session.getAttribute("msg");
%>
<!--表单开始 -->
<div class="d-flex justify-content-center login-wrapper">
    <div class="col-sm-8 col-md-6 col-xl-4 p-4 card align-self-center login">
        <div class="card-header text-center bg-transparent">
            <h4 class="mb-0">个人相册注册</h4>
        </div>
        <div class="card-body">
            <form action="RegisterServlet" method="post">
                <div class="form-group text-left">
                    <input type="text" class="form-control required" placeholder="用户名" autocomplete="off"
                           name="UserName" autofocus="autofocus" maxlength="32">
                </div>
                <div class="form-group text-left">
                    <input type="password" class="form-control required" name="Password" placeholder="密码"
                           maxlength="32">
                </div>
                <div class="form-group text-left">
                    <input type="text" class="form-control required" name="Email" placeholder="邮箱"
                           maxlength="32">
                </div>
                <!-- 出错显示的信息框 -->
                <c:if test="${not empty msg}">
                    <div class="alert alert-warning alert-dismissible" role="alert">
                        <button type="button" class="close" data-dismiss="alert">
                            <span>&times;</span>
                        </button>
                        <strong>${msg}</strong>
                    </div>
                </c:if>
                <div class="">
                    <button type="submit" class="btn btn-mybg btn-block">注&nbsp;&nbsp;册</button>
                </div>
                <a href="login.jsp">登&nbsp;&nbsp;录</a>
            </form>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</body>
</html>